<template>
<Common-Style>
  <h slot="title">项目 · 成果</h>
  <div slot="body">
    <div class="project">
      <div class="row_1">
        <div class="col-sm-6 col-lg-4" v-for="(item,index) in list" :key="item" v-if="index<3">
          <div class="thumbnail">
            <img class="projectImg" :src="item.project.projectPhotoAddress" alt="...">
            <div class="caption">
              <h3>{{item.project.projectName}}</h3>
              <p>开发人员： <span v-for="item in item.memberName"> {{item}}  </span></p>
              <el-popover
                  placement="top-start"
                  width="300"
                  trigger="click" >
                <h4 style="color: rgba(194,194,6,0.83)">{{item.project.projectName}}</h4>
                <p style="font-size: 16px">{{item.project.projectBrief}}</p>
                <a :href="item.project.projectAddress" target="_blank">项目地址</a>
                <el-button slot="reference" class="project-button">查看详情</el-button>
              </el-popover>
            </div>
          </div>
        </div>
      </div>
    </div>
      <div class="el_button">
        <el-button @click="projectClick" type="primary" round>了解更多</el-button>
      </div>
  </div>
</Common-Style>
</template>

<script>
// import CommonStyle from "./CommonStyle";
const CommonStyle = () => import('./CommonStyle')

export default {
  name: "HomeProject",
  data(){
    return {
      list:[],
    }
  },
  components: {
    CommonStyle
  },
  methods: {
    projectClick () {
      this.$router.push('/project');
    }
  },
  mounted() {
    this.$nextTick(function () {
      this.$axios({
        url: '/officialwebsite/projectFrontDesk/selectAll',
        method: 'get',
        // headers: {
        //   'X-CSRFToken': this.getCookie('csrftoken')
        // },
      }).then(res => {
        console.log(res.obj)
        console.log(res.obj.length)
        // console.log(res.obj.length)
        for (let i = 0; i < res.obj.length; i++) {
          this.list.push(res.obj[i])
        }
        console.log(this.list)
      })
    })
    // getma() {

  }
}
</script>

<style lang="less" scoped>
.project {
display: flex;
  flex-direction: row;
  min-height: 375px;
  margin-top: 10px;
  .row_1 {
    min-height: 375px;
    .thumbnail {
      min-height: 375px;
      .projectImg {
        width: 100%;
        height: 250px;
        object-fit: cover;
        transition: all 0.4s ease-out 0s;
      }
    }
  }
}

.el_button {
  margin-top: 20px;
  margin-bottom: 10px;
  height: 40px;
  text-align: center;
}
@media screen and (max-width: 850px) {
  .row_1 {
    .thumbnail {
      min-height: 100px!important;
      .projectImg {
        width: 100%;
        height: 50vw!important;
      }
      .caption {
        h3 {
          font-size: 18px;
        }
        p {
          font-size: 14px;
        }
      }
    }
  }
  .el-button {
    margin-top: -10px;
  }
}
</style>
